import React, { Component } from 'react'
/**
 * React事件处理
 * 1、类组件的事件绑定，常见的如下几种写法
 * 1）onClick={回调函数}：这种写法标签和业务代码混在一起，可读性不高
 * 2）onClick={this.类中的成员方法}:这种写法没有this指向
 * 3）onClick={this.类中的成员变量}:这个成员变量的值是一个箭头函数，很好的解决的this指向问题
 * 注意：
 * 1)名称必须是驼峰命名法
 * 2)onClick={this.类中的成员方法},调用的时候不能直接(),如果后面带了()，页面加载完毕后，直接调用函数中的内容
 * 2、this指向的改变
 * this指向改变有两种方式
 * 1）直接使用将事件处理函数作为类中的成员变量的值存在，可以解决(推荐),注意：ES6直接可以使用
 * 2）通过bind改变this指向的方案来解决，具体的做法如下
 * 目前常见的写法有两种
 * 1）直接在构造函数中来进行this指向改变
 * constructor(){
    super()
    this.clickHandle1=this.clickHandle1.bind(this)
   }
   2)在使用的时候改变this指向
   <button onClick={this.clickHandle1.bind(this)}>事件绑定2</button>
   从性能方面考虑，强烈建议将this指向的改变放在构造方法中
 */
export default class App extends Component {
  constructor(){
    super()
    //this.clickHandle1=this.clickHandle1.bind(this)
  }

  clickHandle1(){
    console.log('事件处理函数-调用类中的成员方法-普通函数的写法',this);
  }
  clickHandle2=()=>{
    console.log('事件处理函数-调用类中的成员变量-成员变量的值是箭头函数',this);
  }
  clickHandle3(arg1,arg2,arg3){
    console.log(arg1,arg2,arg3);
  }
  /*
    用来渲染页面的方法
  */
  render() {
    return (
      <div>
        <button onClick={function(){
            console.log('事件处理1-匿名函数');
        }}>事件绑定1</button>
        <button onClick={()=>{console.log('事件处理1-箭头函数')}}>事件绑定1</button>
        <button onClick={this.clickHandle1.bind(this)}>事件绑定2</button>
        <button onClick={this.clickHandle2}>事件绑定3</button>
        <button onClick={()=>{this.clickHandle3(10,20,30)}}>事件绑定4</button>
      </div>
    )
  }
}
